<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="分页列表"
      :back-button="backButton"
      :left-buttons="leftButtons"
      :right-buttons="rightButtons"
      @nav-bar-back-click="$dsxRouter.back()"
      @nav-bar-left-click="handleNavBarLeftEv"
      @nav-bar-right-click="handleNavBarRightEv"
    >
    </hips-nav-bar>

    <hips-dsx-input
      v-if="dsx"
      :dsx-field="dsx.getQueryField('userName')"
    ></hips-dsx-input>

    <hips-button block type="primary" @click="query">query</hips-button>

    <hips-swipeout-list
      :list="dsx.records.data"
      :right-buttons="swipeoutRightButtons"
    >
      <hips-cell
        slot-scope="{ item, index }"
        slot="content"
        :title="`${index + 1}. ${item.get('userName')} - ${item.key}`"
        :description="getGender(item.get('gender'))"
        @click="clickListContent(index)"
      >
        <hips-icon
          slot="icon"
          :name="item.isSelected ? 'check' : 'not-check'"
          class="hips-cell__left-icon"
        ></hips-icon>
        <hips-icon
          slot="right-icon"
          v-if="item.isCurrent"
          name="screen"
          class="hips-cell__right-icon"
        ></hips-icon>
      </hips-cell>
    </hips-swipeout-list>

    <hips-button v-show="showMore" block type="primary" @click="nextPage"
      >next page</hips-button
    >
  </hips-view>
</template>

<script>
import Dsx from '@hips/plugin-dataset-vuex';

import { View, NavBar, Button, Cell, SwipeoutList, Icon } from '@hips/vue-ui';

import HipsDsxInput from '@/components/hips-dsx-input';

import createAxios from '../utils/fetch';

export default {
  name: 'user-list',
  data() {
    const _this = this;
    const axiosInstance = createAxios();

    return {
      dsx: new Dsx({
        moduleName: 'paging-list',
        autoQuery: true,
        axios: axiosInstance,
        pageSize: 10,
        dataKey: 'data',
        primaryKey: 'id',
        selection: 'multi',
        // autoQueryAfterSubmit: true,
        queryFields: [
          {
            name: 'userName',
            type: 'text',
            placeholder: '请输入姓名',
            label: '姓名',
            labelPosition: 'left',
            defaultValue: '',
          },
        ],
        fields: [
          {
            name: 'userName',
          },
          {
            name: 'gender',
          },
        ],
        paging: true,
        transport: {
          retrieve: '/user/list',
          delete: '/user/delete',
        },
        events: {
          beforeQuery() {
            _this.$hips.indicator.show({
              text: '加载中',
            });
            return Promise.resolve(true);
          },
          loadSuccess() {
            _this.$hips.indicator.hide();
            const all = _this.dsx.records.all;
            console.log('all = ', all);
          },
          queryNoMore() {
            _this.showMore = false;
            _this.$hips.toast('没有更多数据');
          },
          queryNoData() {
            _this.$hips.toast('没有相关数据');
          },
          beforeSubmit() {
            _this.$hips.indicator.show({
              text: '加载中',
            });
            return Promise.resolve(true);
          },
          submitSuccess() {
            _this.$hips.indicator.hide();
            _this.$hips.toast('提交成功');
          },
          beforeDelete() {
            return new Promise((resolve) => {
              _this.$hips.dialog.confirm({
                title: '提示',
                content: '确定删除该条记录？',
                okText: '确定',
                cancelText: '取消',
                onOk() {
                  // on OK
                  resolve(true);
                },
                onCancel() {
                  // on cancel
                  resolve(false);
                },
              });
            });
          },
          selected({ record, previous }) {
            console.log('selected record = ', record);
            console.log('selected previous = ', previous);
          },
          unSelected({ record }) {
            console.log('unSelected record = ', record);
          },
          selectedAll() {
            console.log('selectedAll');
          },
          unSelectedAll() {
            console.log('unSelectedAll');
          },
          indexChange({ current, previous }) {
            console.log('indexChange current = ', current);
            console.log('indexChange previous = ', previous);
          },
        },
      }),
      backButton: {
        showLeftArrow: true,
      },
      leftButtons: [
        {
          buttonLabel: '全选',
        },
      ],
      rightButtons: [
        {
          buttonLabel: '更多',
        },
      ],
      swipeoutRightButtons: [
        {
          width: '80',
          bgColor: 'blue',
          fontColor: '#fff',
          text: 'delete',
          onClick: ({ index }) => {
            _this.dsx.records.at(index).delete();
          },
        },
      ],
      isSelectAll: false,
      showMore: true,
    };
  },
  components: {
    [View.name]: View,
    [NavBar.name]: NavBar,
    [Button.name]: Button,
    [Cell.name]: Cell,
    [SwipeoutList.name]: SwipeoutList,
    [Icon.name]: Icon,
    HipsDsxInput,
  },
  methods: {
    getGender(gender) {
      if (gender == '0') {
        return '女';
      } else {
        return '男';
      }
    },
    query() {
      this.showMore = true;
      this.isSelectAll = false;
      this.dsx.records.firstPage();
    },
    nextPage() {
      this.dsx.records.nextPage();
    },

    clickListContent(index) {
      const record = this.dsx.records.at(index);

      if (record.isSelected) {
        this.dsx.records.unSelect(index);
      } else {
        this.dsx.records.select(index);
      }
    },

    commitDelete() {
      // this.dsx.records.submit();
      const deleted = this.dsx.records.deleted;
      console.log('deleted = ', deleted);
    },

    handleNavBarRightEv() {
      this.$hips.actionsheet.show({
        title: '操作',
        buttons: [
          {
            text: '全部删除',
            closeAfterClick: true,
            handler: () => {
              this.dsx.records.deleteAll();
            },
          },
          {
            text: 'Push 记录',
            closeAfterClick: true,
            handler: () => {
              this.pushRecords();
            },
          },
          {
            text: 'Unshift 记录',
            closeAfterClick: true,
            handler: () => {
              this.unshiftRecords();
            },
          },
          {
            text: '定位到第3条',
            closeAfterClick: true,
            handler: () => {
              this.dsx.records.locate(2);
            },
          },
          {
            text: '定位到第22条',
            closeAfterClick: true,
            handler: () => {
              this.dsx.records.locate(21);
            },
          },
          {
            text: '定位到第30条',
            closeAfterClick: true,
            handler: () => {
              this.dsx.records.locate(29);
            },
          },
          {
            text: '定位第1条',
            closeAfterClick: true,
            handler: () => {
              this.dsx.records.first();
            },
          },
          {
            text: '定位最后1条',
            closeAfterClick: true,
            handler: () => {
              this.dsx.records.last();
            },
          },
          {
            text: '翻转记录',
            closeAfterClick: true,
            handler: () => {
              this.dsx.records.reverse();
            },
          },
          {
            text: '重置记录',
            closeAfterClick: true,
            handler: () => {
              this.dsx.records.reset();
            },
          },
        ],
      });
    },

    handleNavBarLeftEv() {
      if (this.isSelectAll) {
        this.dsx.records.unSelectAll();
        this.isSelectAll = false;
      } else {
        this.dsx.records.selectAll();
        this.isSelectAll = true;
      }
    },

    pushRecords() {
      const data = [
        {
          id: 'ID2000',
          userName: 'name2000',
          gender: '0',
        },
        {
          id: 'ID2001',
          userName: 'name2001',
          gender: '1',
        },
      ];

      this.dsx.records.push(data);
    },
    unshiftRecords() {
      const data = [
        {
          id: 'ID3000',
          userName: 'name3000',
          gender: '1',
        },
        {
          id: 'ID3001',
          userName: 'name3001',
          gender: '0',
        },
      ];

      this.dsx.records.unshift(data);
    },
    getCurrent() {
      const current = this.dsx.records.current;
      const currentIndex = this.dsx.records.currentIndex;
      console.log('current = ', current);
      console.log('currentIndex = ', currentIndex);
    },

    selected() {
      const selected = this.dsx.records.selected;
      console.log('selected = ', selected);
    },
  },
};
</script>

<style scoped></style>
